<template>
  <view class="main">
    <u-form labelPosition="left" :model="formData" label-width="88" ref="form">
      <view class="commonBox">
        <u-form-item label="头像" prop="aliName" borderBottom ref="item1">
          <view class="avatar">
            <view class="sctx">
              <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image class="img" :src="formData.avatar" mode="aspectFill"></image>
              </button>
            </view>
          </view>
        </u-form-item>
        <u-form-item label="姓名" prop="nickName" ref="item1">
          <view style="width: 100%; text-align: right" @click="show = true">
            {{ formData.nickName }}
          </view>
        </u-form-item>
      </view>
    </u-form>
    <u-cell-group :border="false">
      <u-cell is-link :border="false" title="关于我们" @click="goPage('/pages/myPage/setting/aboutUs')"> </u-cell>
    </u-cell-group>
    <u-modal :show="show" title="修改昵称" showCancelButton @confirm="submit" @cancel="show = false">
      <view class="popbox" style="width: 100%">
        <u-input v-model="formData.nickName" type="nickname" placeholder="修改昵称"></u-input>
      </view>
    </u-modal>
  </view>
</template>

<script setup lang="ts">
// @ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { getUserInfo } from "@/api/my";
const userInfo = ref<myTypes.userInfo>();
const show = ref(false);
onShow(async () => {
  getInfoFn();
});
import { userEdit } from "@/api/my";
import { BASE_UPLOADURL } from "@/utils/request";
import { onMounted, ref } from "vue";
import { goPage } from "@/utils/commonFn";
const formData = ref({
  nickName: "",
  avatar: "",
});
onMounted(() => {
  formData.value = uni.getStorageSync("userInfo");
});
const getInfoFn = async () => {
  const res = await getUserInfo();
  userInfo.value = res.data;
  uni.setStorageSync("userInfo", res.data);
};
const onChooseAvatar = (e: any) => {
  const { avatarUrl } = e.detail;
  console.log("微信图像", avatarUrl);
  uni.showLoading({
    title: "加载中",
  });
  uni.uploadFile({
    url: BASE_UPLOADURL,
    filePath: avatarUrl,
    header: {
      Authorization: uni.getStorageSync("token"),
    },
    name: "file",
    success: async (uploadFileRes) => {
      formData.value.avatar = JSON.parse(uploadFileRes.data).data.url;
      submit();
    },
    complete() {
      //隐藏loading
      uni.hideLoading();
    },
  });
};
const submit = async () => {
  await userEdit(formData.value);
  show.value = false;
  uni.showToast({
    title: "修改成功",
  });
  getInfoFn();
};
</script>

<style lang="less" scoped>
@import "./css/cell-group.scss";

.layout {
  padding: 34rpx 0;
  text-align: center;
  background: #ffffff;
  font-size: 32rpx;
  color: #e54a50;
  margin-top: 40rpx;
}
.avatar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: salmon;
    margin-right: -24rpx;
  }
  .sctx {
    button::after {
      border: none;
    }
    button {
      border-color: #fff !important;
      background: rgba(0, 0, 0, 0) !important;
      height: 110rpx;
    }
  }
}
</style>
